<template>
  <div class="center-container">
    <div
      class="list-container"
      :style="{
        width: editorData.csWidth + 'px',
        height: editorData.csHeight + 'px',
      }"
    >
      <div
        v-if="isShow"
        ref="wrapper"
        class="list"
        :style="{
          backgroundColor: editorData.remark || '#ffffff',
          'background-image': `url(${bgImg})`,
        }"
      >
        <Vue3DraggableResizable
          v-for="(item, index) in widgets"
          :key="index"
          v-model:active="item.active"
          v-model:h="item.height"
          v-model:w="item.width"
          v-model:x="item.x"
          v-model:y="item.y"
          class="item"
          :draggable="item.draggable || true"
          :init-h="item.height"
          :init-w="item.width"
          :min-h="1"
          :min-w="1"
          :parent="false"
          :resizable="item.resizable || true"
          :style="{
            'z-index': item.zIndex,
          }"
          @activated="setCurIndex(index)"
        >
          <TextView v-if="item.type === 'text'" :index="index" />
          <ImageView v-if="item.type === 'image'" :index="index" />
          <RectView v-if="item.type === 'rect'" :index="index" />
          <LineView v-if="item.type === 'line'" :index="index" />
          <QrCodeView v-if="item.type === 'qrCode'" :index="index" />
          <BarCodeView v-if="item.type === 'barCode'" :index="index" />
          <div v-if="item.active" class="del" @click="delCom(index)">
            <el-icon><CircleCloseFilled /></el-icon>
          </div>
        </Vue3DraggableResizable>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useEleStore } from '@/store/modules/coms'
  import TextView from '@/views/tag/editor/widget/text/view.vue'
  import ImageView from '@/views/tag/editor/widget/image/view.vue'
  import RectView from '@/views/tag/editor/widget/rect/view.vue'
  import LineView from '@/views/tag/editor/widget/line/view.vue'
  import QrCodeView from '@/views/tag/editor/widget/qrCode/view.vue'
  import BarCodeView from '@/views/tag/editor/widget/barCode/view.vue'
  const Store = useEleStore()
  const {
    getEditorData: editorData,
    getWidgets: widgets,
    getEditorBgImg,
  } = storeToRefs(Store)
  const setCurIndex = (index: number) => {
    Store.setCurIndex(index)
  }
  const isShow = ref(true)
  const bgImg: any = getEditorBgImg
  watch(
    () => [editorData.value.csWidth, editorData.value.csHeight],
    () => {
      // 宽高修改时 重新渲染 重新计算容器宽高 保证组件的可移动范围正确
      isShow.value = false
      nextTick(() => {
        isShow.value = true
      })
    },
    { deep: true }
  )
  // 删除组件
  const delCom = (index: number) => {
    Store.delWidget(index)
  }
  const wrapper = ref(null) as any
  const getListWapper = () => {
    return wrapper
  }
  defineExpose({
    getListWapper,
  })
</script>

<style lang="scss" scoped>
  .center-container {
    position: relative;
    width: 100%;
    background: #f1f1f1;
    box-shadow: 0 0 5px 0 #a5a5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
    padding: 20px;

    .list-container {
      // border: 1px solid #999;
      box-sizing: content-box;
      background-color: #ffffff;
      // overflow: hidden;

      .list {
        position: relative;
        height: 100%;
        width: 100%;
        background-color: #ffffff;
        background-size: 100% 100%;

        .item {
          cursor: move;

          .del {
            position: absolute;
            right: -20px;
            top: -22px;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            color: red;
          }
        }
      }
    }
  }
</style>
